<template>
  <div class="home">
    <!-- 订单数量及金额统计 -->
    <div class="section">
      <el-row :gutter="20">
        <el-col :span="4" v-for="(item, idx) in orderStats" :key="'order-' + idx">
          <el-card shadow="hover">
            <div class="order-card-content">
              <div class="order-type">{{ item.transactionType }}</div>
              <div class="order-amount">交易金额：<span class="count">{{ item.transactionAmount }}元</span></div>
              <div class="order-count">交易数量：<span class="count">{{ item.transactionCount }}</span></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 用户数量统计 -->
    <div class="section">
      <el-row :gutter="20">
        <el-col :span="4" v-for="(item, idx) in userStats" :key="'user-' + idx">
          <el-card shadow="hover">
            <div class="card-header">
              <span>{{ item.roleName }}</span>
              <span class="count">{{ item.userCount }}</span>
              <span class="unit">人</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 经营统计报表 -->
    <div class="section">
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'

const orderStats = ref([])
const userStats = ref([])
const businessStats = ref([])
const chartRef = ref(null)
let chartInstance = null

const fetchOrderStats = async () => {
  const year = new Date().getFullYear()
  const { data } = await axios.get(`/carRepair/admin/homepage/orderStatistic/${year}`)
  if (data.code === 200) orderStats.value = data.data || []
}
const fetchUserStats = async () => {
  const { data } = await axios.get('/carRepair/admin/homepage/userStatistic')
  if (data.code === 200) userStats.value = data.data || []
}
const fetchBusinessStats = async () => {
  const year = new Date().getFullYear()
  const { data } = await axios.get(`/carRepair/admin/statisticalStatement/businessReport/${year}`)
  if (data.code === 200) businessStats.value = data.data || []
}

const renderChart = () => {
  if (!chartRef.value) return
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value)
  }
  const months = businessStats.value.map(i => i.month)
  const totalIncome = businessStats.value.map(i => i.totalIncome)
  const totalCost = businessStats.value.map(i => i.totalCost)
  chartInstance.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['总收入', '总支出'] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', boundaryGap: false, data: months },
    yAxis: { type: 'value' },
    series: [
      {
        name: '总收入',
        type: 'line',
        data: totalIncome,
        smooth: true,
        symbol: 'circle',
        lineStyle: { color: '#409EFF' },
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '总支出',
        type: 'line',
        data: totalCost,
        smooth: true,
        symbol: 'circle',
        lineStyle: { color: '#67c23a' },
        itemStyle: { color: '#67c23a' }
      }
    ]
  })
}

onMounted(async () => {
  await Promise.all([
    fetchOrderStats(),
    fetchUserStats(),
    fetchBusinessStats()
  ])
  await nextTick()
  renderChart()
})
</script>

<style scoped>
.home {
  background: #f5f7fa;
  min-height: 100vh;
}
.section {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px 12px 12px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.card-header {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.count {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-left: auto;
}
.sub-info {
  color: #999;
  font-size: 14px;
  margin-top: 4px;
}
.chart {
  width: 100%;
  height: 340px;
  margin-top: 12px;
}
.order-card-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.order-type {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.order-amount, .order-count {
  font-size: 15px;
  color: #666;
}
.order-amount .count, .order-count .count {
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
}
.order-amount .unit {
  font-size: 14px;
  color: #999;
  margin-left: 2px;
}
@media screen and (max-width: 1400px) {
  .data-cards {
    overflow-x: auto;
    padding-bottom: 12px;
  }
  .el-col {
    min-width: 240px;
  }
}
</style>
